<template>
  <a-modal
    :body-style="{ padding: '0 0' }"
    :visible="visibleTmp"
    width="62%"
    :title="form.method == 'update' ? '修改电子合同' : '生成电子合同'"
    cancel-text="关闭"
    unmount-on-close
    :mask-closable="false"
    :ok-loading="loadingTmp"
    @close="onCancel"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="pt-4 px-5" style="max-height: 85vh">
      <div class="flex items-center">
        <span>合同类型：</span>
        <a-radio-group v-model="form.contractType" :disabled="form.method == 'update'" @change="onChangeContract">
          <a-radio :value="1">租车合同</a-radio>
          <!-- 付费合同不能创建续租合同  payType: 0 免费合同 1 付费合同 -->
          <a-radio v-if="form.payType == 0" :value="2">续租合同</a-radio>
        </a-radio-group>
      </div>
      <a-alert class="mt-4">
        <template #icon>
          <icon-exclamation-circle />
        </template>
        <span v-if="form.method == 'update'">
          如修改了对应的字段信息，将使用最新的信息更新电子合同中的内容，不影响订单的信息。请确保修改后的内容与实际订单的内容保持一致，避免发生合同内容的纠纷。
        </span>
        <span v-else> 将会根据以下信息生成电子合同，如需修改，请先前往订单修改页面进行调整后再生成。 </span>
      </a-alert>
      <!-- 修改电子合同 -->
      <template v-if="form.method == 'update'">
        <page-form class="mt-4" ref="formRef" :model="form" :rules="rules" layout="vertical">
          <card title="客户信息">
            <page-form-row :gutter="24">
              <page-form-item field="memberType" label="客户类型">
                <a-input v-model="form.memberTypeName" disabled />
              </page-form-item>
              <page-form-item v-if="form.memberType == 1" label="客户公司名称">
                <a-input v-model="form.clientName" disabled />
              </page-form-item>
              <page-form-item label="承租人">
                <a-input v-model="form.memberName" disabled />
              </page-form-item>
              <page-form-item label="联系电话" v-if="form.memberType == 2">
                <a-input v-model="form.memberPhone" disabled />
              </page-form-item>
              <page-form-item label="证件类型">
                <a-select placeholder="请选择" v-model="form.cardType" popup-container="body" :trigger-props="{ updateAtScroll: true }">
                  <a-option v-for="item in dict.cardTypeEnum" :key="item.value" :label="item.label" :value="item.value" />
                </a-select>
              </page-form-item>
              <page-form-item field="cardNumber" label="证件号">
                <i-input v-model="form.cardNumber" :max-length="18" placeholder="请输入" />
              </page-form-item>
              <page-form-item label="紧急联系人">
                <i-input v-model="form.emergencyContactName" :max-length="30" placeholder="请输入" />
              </page-form-item>
              <page-form-item field="emergencyContactPhone" label="紧急联系人手机号">
                <a-input v-model="form.emergencyContactPhone" placeholder="请输入" :max-length="11" allow-clear @input="onInput" />
              </page-form-item>
            </page-form-row>
          </card>
          <card title="租赁信息">
            <page-form-row :gutter="24">
              <page-form-item
                field="timeRange"
                :label="form.contractType == 1 ? '预计租赁周期' : '预计续租周期'"
                labelTooltipContent="租赁周期最小时间范围为1小时"
                size="1/2"
              >
                <template #iconSlot>
                  <a-tooltip
                    v-if="form.contractType == 2"
                    content="续租周期取的是当前订单最新的租赁周期，如需修改，请通过修改合同的功能进行调整。"
                  >
                    <icon-exclamation-circle style="font-size: 16px" />
                  </a-tooltip>
                </template>
                <template #label-extra>
                  <div class="rent-days"> 租期：{{ form.rentDays || '- 天' }} </div>
                </template>
                <i-separate-range-picker
                  class="w-full separate-range-picker"
                  show-time
                  v-model="form.timeRange"
                  startPlaceHolder="开始时间"
                  endPlaceHolder="结束时间"
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm:00"
                  :time-picker-props="{
                    format: 'HH:mm',
                    hideDisabledOptions: true,
                  }"
                  @change="changeTimeRange"
                  position="br"
                  popupContainer="body"
                  updateAtScroll="true"
                />
              </page-form-item>
            </page-form-row>

            <page-form-row :gutter="24">
              <page-form-item field="siteId" label="取车门店">
                <template #label-extra>
                  <a-checkbox v-model="form.sendServiceFlag">上门送车</a-checkbox>
                </template>
                <remote-select
                  v-model="form.siteId"
                  :params="{ oldId: form.siteId, siteStatusList: [10] }"
                  type="site_listBystaff"
                  :allow-clear="false"
                  @change="(val: any) => changeSiteIdFn(val, 'site')"
                />
              </page-form-item>
              <page-form-item label="还车门店">
                <template #label-extra>
                  <a-checkbox v-model="form.returnServiceFlag">上门取车</a-checkbox>
                </template>
                <remote-select
                  v-model="form.returnSiteId"
                  :params="{ siteType: 40, siteId: form.siteId, siteStatusList: [10] }"
                  type="site_lease_list"
                  :allow-clear="false"
                  @change="(val: any) => changeSiteIdFn(val, 'returnSite')"
                  @listGet="returnSiteListGetFn"
                />
              </page-form-item>
            </page-form-row>
            <page-form-row :gutter="24">
              <page-form-item field="address" label="上门送车地址">
                <template #label-extra>
                  <div class="map-location" :class="[!form.sendServiceFlag ? 'disabled' : '']" @click="mapLocationClickFn('address')">
                    <icon-location /> 地图选择
                  </div>
                </template>
                <lease-auto-complete
                  :disabled="!form.sendServiceFlag"
                  v-model="form.address"
                  @change="(point: any) => autoCompleteChangeFn(point, 'address')"
                  @blur="updateLnglatPickerTips('address')"
                />
              </page-form-item>
              <page-form-item field="returnAddress" label="上门取车地址">
                <template #label-extra>
                  <div
                    class="map-location"
                    :class="[!form.returnServiceFlag ? 'disabled' : '']"
                    @click="mapLocationClickFn('returnAddress')"
                  >
                    <icon-location /> 地图选择
                  </div>
                </template>
                <lease-auto-complete
                  :disabled="!form.returnServiceFlag"
                  v-model="form.returnAddress"
                  @change="(point: any) => autoCompleteChangeFn(point, 'returnAddress')"
                  @blur="updateLnglatPickerTips('returnAddress')"
                />
              </page-form-item>
            </page-form-row>
          </card>
          <card title="车辆信息" :showDivider="form.contractFee.length">
            <page-form-row :gutter="24">
              <page-form-item label="车辆来源" required>
                <a-radio-group v-model="form.carSource" @change="changeCarSourceFn">
                  <a-radio :value="item.value" v-for="(item, index) in dict.carSourceEnum" :key="index">{{ item.label }}</a-radio>
                </a-radio-group>
              </page-form-item>
              <page-form-item label="车牌号" labelTooltipContent="请先选择租赁周期和取车门店后，再选择排车车辆" field="carLicenseNo">
                <select-input
                  :disable="!form.rentDays || !form.siteId"
                  v-model="form.carLicenseNo"
                  @clear="clearCarFn"
                  @click="selectCarFn"
                />
              </page-form-item>
              <page-form-item label="排车车型" size="1" class="mb-0">
                {{ form.carModelName || '-' }}
              </page-form-item>
              <!-- 如果使用的合同模板中配置了交车里程or交车油电量的变量参数，那么则会在生成电子合同中的弹窗中展示 -->
              <page-form-item label="交车里程" size="1/2" class="mb-0" v-if="form.isExistenceStartCarMileageFlag">
                <i-input-number :precision="0" unit="公里" v-model="form.startCarMileageContract" />
              </page-form-item>
              <page-form-item label="交车油(电)量" size="1/2" class="mb-0" v-if="form.isExistenceStartCarOilFlag">
                <i-input v-model="form.startCarOilContract" :max-length="20" />
              </page-form-item>
            </page-form-row>
          </card>
          <card title="费用信息" :showDivider="false" v-if="form.contractFee.length">
            <page-form-row :gutter="24">
              <page-form-item
                v-for="(item, index) in form.contractFee"
                :label="item.name"
                :key="item.name + index"
                :field="`contractFee[${index}].value`"
                :rules="[{ required: true, message: '请输入' }]"
              >
                <i-input-number v-model="item.value" />
              </page-form-item>
            </page-form-row>
          </card>
        </page-form>
      </template>
      <!-- 生成电子合同 -->
      <template v-else>
        <a-descriptions class="mt-4" title="客户信息" :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="客户类型">{{ form.memberTypeName }}</a-descriptions-item>
          <a-descriptions-item label="客户公司名称" v-if="form.memberType === 1">{{ form.clientName }}</a-descriptions-item>
          <a-descriptions-item label="承租人">{{ form.memberName }}</a-descriptions-item>
          <a-descriptions-item label="联系电话" v-if="form.memberType == 2">{{ form.memberPhone }}</a-descriptions-item>
          <a-descriptions-item label="证件类型">{{ form.cardTypeName }}</a-descriptions-item>
          <a-descriptions-item label="证件号">{{ form.cardNumber }}</a-descriptions-item>
          <a-descriptions-item label="紧急联系人">{{ form.emergencyContactName }}</a-descriptions-item>
          <a-descriptions-item label="紧急联系人手机号">{{ form.emergencyContactPhone }}</a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <a-descriptions
          :label-style="{ width: '110px' }"
          :value-style="{ width: 'auto' }"
          title="租赁信息"
          :align="{ label: 'right' }"
          :column="1"
        >
          <a-descriptions-item class="w-auto">
            <template #label>
              {{ form.contractType == 1 ? '预计租赁周期' : '预计续租周期' }}
              <a-tooltip
                v-if="form.contractType == 2"
                content="续租周期取的是当前订单最新的租赁周期，如需修改，请通过修改合同的功能进行调整。"
              >
                <icon-exclamation-circle />
              </a-tooltip>
            </template>
            {{ form.startTime && form.endTime ? form.startTime + '至' + form.endTime : '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="租期">{{ form.rentDays }}</a-descriptions-item>
          <a-descriptions-item label="取车门店">
            {{ form.siteName }}
            <a-checkbox :model-value="!!form.sendServiceFlag" disabled>上门送车</a-checkbox>
          </a-descriptions-item>
          <a-descriptions-item label="上门送车地址">{{ form.address }}</a-descriptions-item>
          <a-descriptions-item label="还车门店">
            {{ form.returnSiteName }}
            <a-checkbox :model-value="!!form.returnServiceFlag" disabled>上门取车</a-checkbox>
          </a-descriptions-item>
          <a-descriptions-item label="上门取车门店">{{ form.returnAddress }}</a-descriptions-item>
        </a-descriptions>
        <a-divider />
        <a-descriptions title="车辆信息" :align="{ label: 'right' }">
          <a-descriptions-item label="车辆来源">{{ form.carSourceName }}</a-descriptions-item>
          <a-descriptions-item label="车牌号">{{ form.carLicenseNo }}</a-descriptions-item>
          <a-descriptions-item label="排车车型">{{ form.carModelName }}</a-descriptions-item>
          <template v-if="form.isExistenceStartCarMileageFlag || form.isExistenceStartCarOilFlag">
            <!-- 如果使用的合同模板中配置了交车里程or交车油电量的变量参数，那么则会在生成电子合同中的弹窗中展示 -->
            <a-descriptions-item label="交车里程" v-if="form.isExistenceStartCarMileageFlag">
              <i-input-number :precision="0" unit="公里" v-model="form.startCarMileageContract" />
            </a-descriptions-item>
            <a-descriptions-item label="交车油(电)量" v-if="form.isExistenceStartCarOilFlag">
              <i-input v-model="form.startCarOilContract" :max-length="20" />
            </a-descriptions-item>
            <!-- 占位符 -->
            <a-descriptions-item label="">{{ ' ' }}</a-descriptions-item>
          </template>
        </a-descriptions>
        <template v-if="order?.payType == 0">
          <a-divider v-if="form.contractFee?.length > 0" />
          <a-descriptions v-if="form.contractFee?.length > 0" title="费用信息" :align="{ label: 'right' }">
            <a-descriptions-item v-for="(item, index) in form.contractFee" :label="item.name" :key="item.name + index">
              {{ unitVal(item.value) }}
            </a-descriptions-item>
          </a-descriptions>
        </template>
        <template v-else>
          <a-divider />
          <a-descriptions title="费用信息" :align="{ label: 'right' }">
            <a-descriptions-item label="租车费">{{ unitVal(order?.totalAmount) }}</a-descriptions-item>
            <a-descriptions-item label="租车押金">{{ unitVal(order?.carDeposit) }}</a-descriptions-item>
            <a-descriptions-item label="违章押金">{{ unitVal(order?.illegalDeposit) }}</a-descriptions-item>
          </a-descriptions>
        </template>
      </template>
    </div>
  </a-modal>

  <lnglat-picker-modal ref="lnglatPickerModalRef" @change="mapLocationSuccessFn" />

  <!-- 选择车牌号 -->
  <car-selector ref="carSelectorRef" mode="select" @confirm="carConfirmFn" />
</template>

<script setup lang="ts">
  import leaseAutoComplete from '../short-order/form/components/lease-auto-complete.vue'
  import carSelector from '@/views/assets/car/stock/car-selector.vue'
  import selectInput from '../short-order/form/components/select-input.vue'

  import { computed, ref, watch } from 'vue'
  import { unitVal } from '@/utils'
  import { usePageDict } from '@/hooks/useDict'
  import { computeRentDay, getContractInfo } from '@/api/order/sOrder'
  import { Modal, Message } from '@arco-design/web-vue'
  import { cloneDeep } from 'lodash-es'
  import dayjs from 'dayjs'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Object,
      default: () => {},
    },
  })

  const dict = usePageDict('shortOrderDict')
  const emits = defineEmits(['onOk', 'update:visible', 'update:loading'])
  const formRef = ref<any>()
  const form = ref<any>({
    contractId: undefined,
  })

  // 租赁周期限制最小时长 60 分钟
  const timeRangeValidator = (value: any, callback: Function) => {
    if (value) {
      let start = value[0]
      let end = value[1]
      if (start && end) {
        let diff = dayjs(end).diff(dayjs(start))
        if (diff < 60 * 60 * 1000) {
          callback('租赁周期最小时间范围为1小时')
        }
      }
    }
    callback()
  }
  const rules = {
    timeRange: [{ required: true, message: '请选择预计租赁周期' }, { validator: timeRangeValidator }],
    siteId: { required: true, message: '请选择取车门店' },
    carLicenseNo: { required: true, message: '请选择车牌号' },
  }

  const onInput = (value: string) => {
    form.value.emergencyContactPhone = value.replace(/\D/g, '')
  }

  const visibleTmp = computed({
    get: () => props.visible,
    set: (val: any) => {
      emits('update:visible', val)
    },
  })

  const loadingTmp = computed({
    get: () => props.loading,
    set: (val: any) => {
      emits('update:loading', val)
    },
  })

  const onCancel = () => {
    emits('update:visible', false)
    emits('update:loading', false)
    form.value = { contractId: undefined }
  }

  const onOk = () => {
    if (form.value.method == 'update') {
      formRef.value.validate((valid: any) => {
        if (!valid) {
          console.log('form', form.value)
          const result = {
            contractId: form.value.contractId,
            cardType: form.value.cardType,
            cardNumber: form.value.cardNumber,
            emergencyContactName: form.value.emergencyContactName,
            emergencyContactPhone: form.value.emergencyContactPhone,
            startTime: form.value.timeRange[0],
            endTime: form.value.timeRange[1],
            rentDays: form.value.rentDays,
            siteId: form.value.siteId,
            siteName: form.value.siteName,
            returnSiteId: form.value.returnSiteId,
            returnSiteName: form.value.returnSiteName,
            address: form.value.address,
            returnAddress: form.value.returnAddress,
            carSource: form.value.carSource,
            carId: form.value.carId,
            carLicenseNo: form.value.carLicenseNo,
            carModelName: form.value.carModelName,
            contractFee: form.value.contractFee,
            sendServiceFlag: form.value.sendServiceFlag ? 1 : 0,
            returnServiceFlag: form.value.returnServiceFlag ? 1 : 0,
            latitude: form.value.latitude,
            longitude: form.value.longitude,
            returnLatitude: form.value.returnLatitude,
            returnLongitude: form.value.returnLongitude,
            startCarMileageContract: form.value.startCarMileageContract,
            startCarOilContract: form.value.startCarOilContract,
          }
          emits('onOk', { detail: result })
        }
      })
    } else {
      emits('onOk', { detail: form.value })
    }
  }

  const onChangeContract = (val: any) => {
    getContractInfo({ orderId: form.value.orderId, orderType: form.value.orderType, contractType: val }).then((res: any) => {
      res.result.contractFee.forEach((item: any) => {
        item.value = +item.value
      })

      form.value = {
        ...form.value,
        ...res.result,
        contractType: val,
        orderType: props.order.orderType,
        operationType: props.order.operationType,
        method: props.order.method,
        payType: props.order.payType,

        memberTypeName: res.result.memberTypeName,
        clientName: res.result.clientName,
        memberName: res.result.memberName,
        memberPhone: res.result.memberPhone,
        cardType: res.result.cardType,
        cardNumber: res.result.cardNumber,
        emergencyContactName: res.result.emergencyContactName,
        emergencyContactPhone: res.result.emergencyContactPhone,
        rentDays: res.result.rentDays,
        timeRange: res.result.timeRange,
        sendServiceFlag: res.result.sendServiceFlag,
        siteId: res.result.siteId,
        returnServiceFlag: res.result.returnServiceFlag,
        returnSiteId: res.result.returnSiteId,
        address: res.result.address,
        returnAddress: res.result.returnAddress,
        carSource: res.result.carSource,
        carLicenseNo: res.result.carLicenseNo,
        carModelName: res.result.carModelName,
        startCarMileageContract: res.result.startCarMileageContract,
        startCarOilContract: res.result.startCarOilContract,
        contractFee: res.result.contractFee,
        cardTypeName: res.result.cardTypeName,
        startTime: res.result.startTime,
        endTime: res.result.endTime,
        carId: res.result.carId,
        siteName: res.result.siteName,
        returnSiteName: res.result.returnSiteName,
        carSourceName: res.result.carSourceName,
        isExistenceStartCarMileageFlag: res.result.isExistenceStartCarMileageFlag,
        isExistenceStartCarOilFlag: res.result.isExistenceStartCarOilFlag,
      }
      console.log('电子合同信息', form.value)
    })
  }

  // ---------订单租赁信息逻辑---------
  const changeTimeRange = (value = []) => {
    form.value.startTime = value[0]
    form.value.endTime = value[1]
    if (value[0] && value[1]) {
      // 计算租期
      const param = {
        startTime: value[0],
        endTime: value[1],
        siteId: form.value.siteId,
      }
      computeRentDay(param).then((res: any) => {
        let { days } = res.result
        if (days.indexOf('小时') >= 0 && days.indexOf('天') >= 0) {
          days = days.replace('天', ' 天 ').replace('小时', ' 小时')
        } else {
          days = days.replace('天', ' 天').replace('小时', ' 小时')
        }
        form.value.rentDays = days
      })
    } else {
      form.value.rentDays = undefined
    }
  }

  // 还车门店短租配置
  const returnSiteShortSiteConfig = ref<any>({})

  // 清空还车门店相关配置
  const clearReturnSite = () => {
    form.value.returnSiteId = undefined
    form.value.returnSiteName = undefined
    form.value.returnServiceFlag = false
    form.value.returnAddress = undefined
    form.value.returnLongitude = undefined
    form.value.returnLatitude = undefined

    returnSiteShortSiteConfig.value = {}
    formRef.value.clearValidate('returnAddress')
  }

  // 还车门店列表获取
  const returnSiteListGetFn = (list: any) => {
    if (list.length > 0) {
      if (!list.find((site: any) => site.id == form.value.returnSiteId)) {
        clearReturnSite()
      }
    } else {
      clearReturnSite()
    }
  }

  // 清空 address 相关值
  const clearAddress = (type = 'address') => {
    formRef.value.clearValidate(type)
    if (type == 'address') {
      form.value.sendServiceFlag = false
      form.value.address = undefined
      form.value.longitude = undefined
      form.value.latitude = undefined
    } else {
      form.value.returnServiceFlag = false
      form.value.returnAddress = undefined
      form.value.returnLongitude = undefined
      form.value.returnLatitude = undefined
    }
  }

  // 切换门店
  const prevSiteId = ref()
  const changeSiteIdFn = (val: any, type: string) => {
    new Promise<void>((resolve) => {
      if (type == 'site') {
        // 编辑订单，修改取车门店
        Modal.confirm({
          title: '确认',
          content: '变更取车门店，系统将重置车牌号，请确认是否修改？',
          okText: '确认',
          cancelText: '关闭',
          onCancel: () => {
            if (prevSiteId.value) {
              form.value.siteId = prevSiteId.value
            } else {
              form.value.siteId = props.order.siteId
            }
          },
          onOk: () => {
            prevSiteId.value = val
            console.log('ok', form.value.siteId)
            resolve()
          },
        })
      } else {
        resolve()
      }
    }).then(() => {
      if (type == 'site') {
        // 切换取车门店，需要清空车型和车牌
        form.value.originalModelId = undefined
        form.value.originalModelName = undefined
        form.value.carId = undefined
        form.value.carLicenseNo = undefined
        form.value.carModelName = undefined

        if (form.value.sendServiceFlag) {
          clearAddress('address')
        }
      } else {
        if (form.value.returnServiceFlag) {
          clearAddress('returnAddress')
        }
      }
    })
  }

  // 地图选点
  const lnglatPickerModalRef = ref()
  const lnglatPickerType = ref('')
  const mapLocationClickFn = (type: string) => {
    if ((type == 'address' && form.value.sendServiceFlag) || (type == 'returnAddress' && form.value.returnServiceFlag)) {
      lnglatPickerType.value = type
      let lnglat: any[] = []
      if (type == 'address') {
        if (form.value.longitude && form.value.latitude) lnglat = [form.value.longitude, form.value.latitude]
      } else {
        if (form.value.returnLongitude && form.value.returnLatitude) lnglat = [form.value.returnLongitude, form.value.returnLatitude]
      }
      if (lnglat.length > 0) {
        lnglatPickerModalRef.value.open(lnglat.join(','))
      } else {
        lnglatPickerModalRef.value.open()
      }
    }
  }
  // 地图选点结束
  const mapLocationSuccessFn = (lnglat: any, option: any) => {
    if (lnglatPickerType.value == 'address') {
      form.value.longitude = lnglat[0]
      form.value.latitude = lnglat[1]
      form.value.address = option.formattedAddress
    } else {
      form.value.returnLongitude = lnglat[0]
      form.value.returnLatitude = lnglat[1]
      form.value.returnAddress = option.formattedAddress
    }
    // 更新 field 提示
    updateLnglatPickerTips(lnglatPickerType.value)
  }
  // 地点输入回调
  const autoCompleteChangeFn = (lnglat: any, type: any) => {
    if (!lnglat) {
      if (type == 'address') {
        form.value.longitude = undefined
        form.value.latitude = undefined
      } else {
        form.value.returnLongitude = undefined
        form.value.returnLatitude = undefined
      }
    } else {
      if (type == 'address') {
        form.value.longitude = lnglat[0]
        form.value.latitude = lnglat[1]
      } else {
        form.value.returnLongitude = lnglat[0]
        form.value.returnLatitude = lnglat[1]
      }
      // 更新 field 提示
      updateLnglatPickerTips(type)
    }
  }
  // 更新地址提示
  const updateLnglatPickerTips = (type: any) => {
    let formVal = form.value
    let longitudeProp = ''
    let latitudeProp = ''
    if (type == 'address') {
      longitudeProp = 'longitude'
      latitudeProp = 'latitude'
    }
    if (type == 'returnAddress') {
      longitudeProp = 'returnLongitude'
      latitudeProp = 'returnLatitude'
    }
    if (formVal[longitudeProp] && formVal[latitudeProp]) {
      formRef.value.clearValidate(type)
    } else {
      formRef.value.setFields({
        [`${type}`]: {
          status: 'error',
          message: '当前位置无法定位，将会影响费用计算。请选择具体取车地址或地图中选取地址',
        },
      })
    }
  }

  // 更换车辆来源
  const changeCarSourceFn = () => {
    form.value.carId = undefined
    form.value.carLicenseNo = undefined
    form.value.carModelName = undefined
  }

  // 清空车牌
  const clearCarFn = () => {
    if (form.value.carLicenseNo) {
      form.value.carId = undefined
      form.value.carLicenseNo = undefined
      form.value.carModelName = undefined
    }
  }

  // 选择车牌完成后
  const platoonModelQueryParam = ref({})
  const carConfirmFn = (id: any, option: any, queryParam: any) => {
    form.value.carId = id
    form.value.carLicenseNo = option.licenseNo
    form.value.carModelName = option.modelName

    // 记录弹窗queryParam
    platoonModelQueryParam.value = { ...queryParam }
  }

  // 选择车牌
  const carSelectorRef = ref()
  const selectCarFn = () => {
    if (form.value.rentDays && form.value.siteId) {
      // 无车辆不缓存筛选条件
      if (!form.value.carId) {
        platoonModelQueryParam.value = {}
      }
      const param = {
        // siteId: form.value.siteId,
        modelId: form.value.originalModelId,
        dateRange: form.value.timeRange,
        id: form.value.carId,
        ...platoonModelQueryParam.value,
        carSource: form.value.carSource,
      }
      carSelectorRef.value.open(param, {
        orderStatus: 10,
        startTime: form.value.timeRange[0],
        endTime: form.value.timeRange[1],
        siteId: form.value.siteId,
        modelId: form.value.originalModelId,
      })
    } else {
      Message.error('请先选择租赁周期和取车门店后，再选择车辆')
    }
  }
  // ---------订单租赁信息逻辑end---------

  watch(
    () => props.order,
    (val) => {
      if (val) {
        console.log('contract-modal', val)
        form.value = cloneDeep(val)
      }
    },
    {
      immediate: true,
    }
  )
</script>

<style lang="less" scoped>
  .rent-days {
    color: rgb(var(--primary-6));
  }
  .map-location {
    color: rgb(var(--primary-6));
    font-size: 14px;
    cursor: pointer;
    svg {
      color: rgb(var(--primary-6));
    }
  }
  .map-location.disabled {
    cursor: no-drop;
    color: rgba(24, 144, 255, 0.5);
    svg {
      color: rgba(24, 144, 255, 0.5);
    }
  }
  .modal-form {
    padding: 0 20px;
  }
</style>
